<template>
    <div class="business">
        <div class="business-title">{{title}}</div>
        <div class="business-items">
            <div class="business-item" v-for="(item, key) in businessItemList" :key=key>
                <div class="business-item-bg" :style="{backgroundImage: 'url(' + item.img + ')'}"></div>
                <div class="business-item-cover"></div>
                <div class="business-item-content">
                    <div class="business-img-name"> 
                        <div class="img-wrapper" :style="{backgroundImage: 'url(' + item.img + ')'}"></div>
                        <span>{{item.name}}</span>
                    </div>

                </div>
                <div class="business-item-qq">
                    <span class="qq-email-title">QQ</span>
                    <span class="qq-email-text">{{item.qq}}</span>
                </div>
                <div class="business-item-email">
                    <span class="qq-email-title">邮箱</span>
                    <span class="qq-email-text">{{item.email}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'businessContact',
  data() {
    return{
        
    }
  },
  props: {
    title: String,
    businessItemList: {
      type: Array,
      required: true
    }
  },
  components: {
  
  },
  mounted: function () {
    //console.log(this.overlayItemList)
  },
  methods: {
    
  }
}
</script>

<style lang="stylus" scoped>
.business{
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
    margin-bottom: 20px; 
}
.business-title{
    box-sizing: border-box;
    font-size:16px;
    color:rgba(30,30,30,1);
    padding-left: 30px;
    line-height:58px;
    border-bottom: 1px solid rgba(238,238,238,1);
}
.business-items{
    padding-top: 40px;
    padding-left: 103px;
    padding-bottom: 20px;
    font-size: 0;
}
.business-item{
    display: inline-block;
    vertical-align: top;
    width:264px;
    margin-bottom: 40px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    position: relative;
    border-top: 1px solid transparent;
}
.business-item:nth-child(odd){
    margin-right: 220px;
}
.business-item-bg{
    width:264px;
    height:86px;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-bottom: 66px;
}
.business-item-cover{
    width:264px;
    height:86px;
    top: 0;
    z-index 1;
    background:rgba(20,85,248,1);
    position: absolute;
    opacity: 0.8;
}
.business-item-content{
    position: absolute;
    z-index 10;
    top: 40px;
    padding-left: 40px;
    font-size: 14px;
    border-top: 1px solid transparent;
}
.business-img-name{
    .img-wrapper{
        display: inline-block;
        width:68px;
        height:68px;
        border: 2px solid rgba(255,255,255,1);
        background-size: auto 68px;
        background-position: center center;
    }
    span{
       font-size:18px;
       font-weight: bold;
       color:rgba(255,255,255,1);
       vertical-align: top;
       margin-top: 10px;
       display: inline-block;
       padding-left: 10px;
    }
}
.business-item-qq{
    margin-bottom: 40px;
    font-size: 14px;
    line-height: 14px;
    padding-left: 40px;
}
.business-item-email{
    margin-bottom: 40px;
    font-size: 14px;
    line-height: 14px;
    padding-left: 40px;
    span{
        display: inline-block;
    }
}
.qq-email-title{
    color:rgba(168,168,168,1);
    margin-right: 20px;
}
.qq-email-text{
    color:rgba(30,30,30,1);
}  
</style>
